/*********宽：750 基准字体大小：32*************/
body{
     background:#0b0135;padding-bottom:3.2rem;
  /*   background: linear-gradient(#783ae0, #6929d2);*/
}
.m-header{
     height: 2.8125rem;
     background: #fff;
     line-height: 2.8125rem;
     text-align: center;
     font-size:1.125rem;
     font-weight: bold;
     color: #000;
     position: relative;
}
 .m-header a{
     width: 1.28125rem;
     height: 1.1875rem;
     display: inline-block;
     position: absolute;
     left:1.125rem;
     top:50%;
     margin-top:-1.09375rem;
}
.m-bg{height: 24.3875rem; margin:4rem 1rem 2rem;padding:0 0.6rem;
background:0 2rem #6b41d5;border-radius: 0.46875rem;position: relative; box-sizing: border-box;}
.m-teacher{
     background:url(http://img.yaotia.com/bk_rder2/bg.png) right bottom no-repeat,url(http://img.yaotia.com/bk_rder2/zb.png) right top no-repeat #5c33c7;
     background-size:50% , 15%;
    padding:1.65625rem 0.6rem 1rem;
     border-radius: 0.46875rem;top:-1rem;bottom:-1rem;
     position: relative;
     margin-top:-1.0625rem;text-align: center;
}
.m-teacher .m-con{
     font-size: 0.75rem;
     color: #fff;
     text-align: left;
     line-height: 1.2rem;
}
 .m-teacher .m-con p{
     display: block;
}
 .m-teacher .m-con span{width: 0.875rem;height: 0.15625rem;background: #7c5ad1;display: block;border-radius: 0.3125rem;margin:1.25rem  auto;}
 .m-teacher .m-con strong{
     display: block;
}
 .m-teacher .m-con strong::before{
     border-radius:50%;
     margin-right:0.2375rem;
     margin-top:0.6125rem;
     vertical-align: top;
     width: 0.16rem;
     height: 0.16rem;
     background: #fff;
     content: '';
     display: inline-block;
}
 .m-tea1{display: flex;}
 .m-head{
     flex: 1;
}
 .m-head img{
     width: 4.625rem;
     height: 4.625rem;
}
 
.m-head p{color: #b8ade3;font-size: 0.75rem;}
.m-header img{
     width: 100%;
     height: 100%;
}
.m-banner img{
     margin-top:-3.6rem;
     width: 100%;
}
 .m-title{
     width: 18.4375rem;
     height: 3.4375rem;
     border-radius: 1.5625rem;
     background: linear-gradient(to right, #f16e64,#feda8e);
     text-align: center;
     line-height: 3.4375rem;
     color: #fff;
     font-size:1rem;
     font-weight: bold;
     margin:-7.4rem auto 1.875rem auto;z-index: 2;position: relative;
}
.m-title1{
     width: 18.28125rem;margin: 0 auto;
     height: 4.71875rem;
     background: url(http://img.yaotia.com/bk_rder2/title.png);
     background-size:100%;
     text-align: center;
     line-height: 3.2rem;font-size: 1.0625rem;font-weight: bold;
     color: #fff;
}
.m-block{
     margin: 0 1rem;
     
}
.m-con{
    overflow: hidden;
    /*display: -webkit-flex;
     justify-content: space-between;
     flex-direction: row;
     flex-wrap: wrap;*/
     }

 .m-block p{
     color: #fff;
     font-size: 1rem;
     font-weight: bold;margin-top:1rem;
}
 
 .m-book{width:5.71875rem;float: left;margin-top:1rem;margin-right:0.4rem;display: inline-block;}
 .m-book:nth-child(3),.m-book:nth-child(6){margin-right: 0;}
 .m-book img{
     /*width:6.21875rem;
     height: 8.3125rem;*/
     width: 100%;
     display: block;
}
 .m-book span{
     font-size: 0.75rem;
     color: #9686db;line-height:1rem;display: inline-block;margin-top:0.4rem;
}
 .m-book strong{
     color: #584b8e;
}
.m-time{margin: 0 1rem;overflow: hidden;}
.m-time .u-title{
     color: #9686db;
     font-size:0.75rem;margin-bottom:1.4375rem;
}
 .m-left{
     font-size: 0.875rem;
     color: #fff;
     float: left;
}
 .m-right{
     float: right;
     font-size: 0.875rem;
     color: #fff;
}
 .m-right span{
     width: 1.53125rem;
     height: 0.8125rem;
     display: inline-block;
     border-radius: 0.25625rem;
     background: linear-gradient(to right, #e86b63,#ae4f57);
     font-size:0.625rem;
     text-align: center;
     line-height: 0.9125rem;margin:0rem 0.2rem 0 0; vertical-align: top;
}
.m-right p,.m-left p{
     margin-bottom:1rem;
}
 .m-middle{
     height: 14.6rem;
     width: 1px ;
     background: #2d1a7a;
     float: left;
     margin: 0 0.63rem;
     position: relative;
}
 .m-middle span{
     width: 0.15625rem;
     position: absolute;
     height: 0.15625rem;
     border-right: 0.03125rem solid #2d1a7a;
     border-top: 0.03125rem solid #2d1a7a;
    /*-webkit-transform: rotate(15deg);
     */
     margin-left: -0.08rem;
     transform: rotate(-45deg);
}
 .m-middle::after{
     width: 0.35rem;
     height: 0.03125rem;
     background: #2d1a7a;
     content: '';
     left:50%;
     margin-left:-0.125rem;
     display: inline-block;
     position: absolute;
     bottom:0;
}
 .m-comment{
     background: #fff;
     border-radius: 0.3125rem;
     position: relative;padding:2rem 0.9375rem  0.5rem;
     /* margin:4rem 1rem 0; */
}
 .m-comment .m-title1{
     margin-top:-4.25rem;
     position: absolute;
     left: 50%;
     margin-left: -9.1rem;
}
.m-list{margin-bottom:1.5rem;}
 .m-list p{
     background: #f7f7f7;
     border-radius: 0.35625rem;
     padding: 0.3125rem;
     font-size:0.875rem;
     color: #333333;line-height: 1.2rem;margin-top:1rem;
}
 .m-info img{
     width: 2.5rem;
     height: 2.5rem;
     display: inline-block;
     border-radius: 50%;position: absolute;left: 0;
}
.m-info{
     position: relative;line-height: 1rem;
     padding-left: 3rem;
}
 .m-info .u-name{
     font-size: 0.875rem;
     font-weight: bold;
     color: #333333;
     display: block;
}
 .m-info .u-time{
     font-size: 0.75rem;
     color: #b3b3b3;
}
.m-bottom{
     height: 5rem;
     background: #160853;
     line-height: 5rem;
     text-align: center;margin-top:2rem;
}
 .m-bottom img{
     width: 5.3125rem;
     height: 1.78125rem;
     display: inline-block;
}
.m-input{padding:0 1rem;
     height: 3.9375rem;
     background: #fff;width: 100%;position: fixed;left: 0;bottom: 0;
}
 .m-input a{
     width: 7.5rem;
     height: 2.8125rem;
     display: inline-block;
     border-radius: 1.5625rem;
     background:linear-gradient(to right,#f7442d,#f77f2d);
     text-align: center;
     line-height: 2.8125rem;
     color: #fff;
     font-size: 1rem;
     font-weight: bold;margin-top:0.6rem;box-shadow: 5px 5px 10px rgba(247,72,45,0.4);
}
 .m-input input{
     border:1px solid #eeeeee;
     background: #f5f5f5;
     height: 2.8125rem;
     line-height: 2.8125rem;
     padding:0 0.3125rem;margin:0.5rem 0.5rem 0 0; vertical-align: top;
}
.m-mask{
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.5);
     position: fixed;
     left: 0;
     top:0;
     z-index: 110;
}
 .m-box{
     width: 90%;
     height: 13.875rem;
     background: #fff;
     border-radius: 0.3125rem;
     position: fixed;
     left: 50%;
     margin-left:-45%;
     top:20%;
     z-index: 120;
}
.m-box img:nth-child(1){
     width: 2rem;
     height: 2rem;
     display: block;
     margin: 1.5625rem auto 0.78125rem;
}
.m-box img:nth-child(2){cursor: pointer;
    width: 0.78125rem;height: 0.78125rem;display: inline-block;position: absolute;right:0.5rem;top:0.5rem;
}
 .m-box h2{margin-bottom:1rem; display: block;
     font-size: 0.9375rem;
     color: #21cf7b;
     text-align: center;
}
 .m-box p{
     color: #666666;
     font-size: 0.75rem;margin: 0 12%;line-height: 1rem;margin-top:0.42rem;
}
 .m-box p strong{color: #f7412d;font-weight: normal;}
 .m-box p span{margin-right:0.2rem;
     width: 0.825rem;
     height: 0.825rem;
     display: inline-block;
     background: #21cf7b;font-size: 0.625rem;vertical-align: top;margin-top:0.1rem;
     border-radius: 50%;
     text-align: center;
     line-height: 0.825rem;color: #fff;
}
 .m-box a{display: block;margin:1.2rem auto 0;width: 14.0625rem;height: 2.25rem;
 font-size:0.875rem;background: #21cf7b;border-radius: 1.3375rem;line-height: 2.25rem;text-align: center;color: #fff;}